<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./static/static/vue.min.js"></script>
  <script src="./static/static/axios.min.js"></script>
  <!-- 本地引入lib-master -->
  <link rel="stylesheet" type="text/css" href="./static/lib-master/theme-chalk/index.css" />
  <script src="./static/lib-master/index.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
  <div id='app'>
    <h1>（砍价）商品详情 flag--{{flag}}</h1>
    商品名称：<el-input v-model="goods.goodsTitle" placeholder="请输入内容" style="width: 400px;" disabled></el-input><br>
    <h3 style="color: red;">
      秒杀时间：{{bargain.startDate}}---{{bargain.endDate}}<br>
      当前时间
      <div class="block">
        <el-date-picker v-model="now" type="datetime" placeholder="选择日期时间" disabled>
        </el-date-picker>
      </div>
      <span v-if="flag==0">距离秒杀开始还有{{nowDateString}}</span>
      <span v-if="flag==1">距离秒杀结束还有{{startEndString}}</span>
      <span v-if="flag==2">秒杀已结束</span>
    </h3>
    商品图片：<img :src="goods.goodsImg" alt="" width="200px" height="200px"><br>
    原价：<el-input v-model="goods.goodsPrice" placeholder="请输入内容" style="width: 250px;" disabled></el-input><br>
    底价：<el-input v-model="bargain.goodsPrice" placeholder="请输入内容" style="width: 250px;" disabled></el-input><br>
    库存：<el-input v-model="bargain.stockCount" placeholder="请输入内容" style="width: 250px;" disabled></el-input><br>
    <!-- 验证码：<el-input v-model="log.code" placeholder="请输入内容" style="width: 250px;"></el-input>
    <img @click="getImgCode" :src="log.url" alt=""><br> -->
    <el-button type="primary" :disabled="flag==0||flag==2||bargain.stockCount==0" @click="gopay">去支付</el-button>
    <el-popover placement="bottom" :disabled="flag==0||flag==2||bargain.stockCount==0" title="快去复制链接分享吧~ ~ ~"
      width="200" trigger="click" :content="shareUrl">
      <el-button slot="reference">去分享</el-button>
    </el-popover>
  </div>
  <script>
    new Vue({
      el: '#app',
      data () {
        return {
          shareUrl: '',
          token: localStorage.getItem("token"),
          log: {
            goodsId: '',
            bargainId: '',
            //fileName: '',
            //url: '',
            //code: ''
          },
          now: '',
          startEnd: '',
          startEndString: '',
          startTime: 0,
          endTime: 0,
          nowDate: new Date(),
          nowDateString: '',
          baseUrl: 'http://localhost:8888/api',
          bargain: {},
          goods: {},
          flag: 0,//初始为0 （未开始）
          timer1: '',
          timer2: '',
          timer3: ''
        }
      },
      watch: {
        'nowDate' (b) {//变量监控 如果活动的开始时间的毫秒值为负数就说明活动已开始 flag=1
          if (b < 0) {
            this.flag = 1
          }
        },
        'flag' (data) {
          if (data == 1) {
            this.timer2 = setInterval(this.getTime2, 1000);
          }
        }
      },
      created () {
        //this.getImgCode();
        this.getGoods();
        this.timer1 = setInterval(this.getTime, 1000);
        this.timer3 = setInterval(this.getTime3, 1000);//定时器每秒调用
        this.timer4 = setInterval(this.getTime4, 1000);//定时器每秒调用
      },
      //方法集合
      methods: {
        gopay (id) {
          location = `http://localhost:7000/activity/actWeb/alipay?orderId=${this.bargain.bargainId}`
        },
        goShare () {
          axios.get(`${this.baseUrl}/bargain/bargainactivity/getShareUrl/${this.log.bargainId}`, {
            headers: {
              token: this.token
            }
          }).then(({ data }) => {
            this.shareUrl = data.shareUrl + `/${this.log.bargainId}`
          })
        },
        // getImgCode () {
        //   axios.get(`${this.baseUrl}/activity/actWeb/getImgCode`).then(({ data }) => {
        //     this.log.fileName = data.fileName
        //     this.log.url = data.url
        //   })
        // },
        formatDuring (mss) {
          let days = Math.floor(mss / (1000 * 60 * 60 * 24));
          let hours = Math.floor((mss % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
          let minutes = Math.floor((mss % (1000 * 60 * 60)) / (1000 * 60));
          let seconds = Math.round((mss % (1000 * 60)) / 1000);
          return days + "天" + hours + "小时" + minutes + "分钟" + seconds + "秒";
        },
        getTime4 () {
          this.now = new Date()
        },
        getTime3 () {
          if (this.endTime < new Date().getTime()) {//判断结束时间与当前时间的毫秒值如果小于就是已结束修改flag=2
            this.flag = 2
            clearInterval(this.timer1);
            clearInterval(this.timer2);
          }
        },
        getTime2 () {
          this.startEnd = this.startEnd - 1000//每调用一次方法就修改一次活动开始的时间差（1000毫秒）
          this.startEndString = this.formatDuring(this.startEnd);
        },
        getTime () {
          this.nowDate = this.nowDate - 1000//每调用一次方法就修改一次活结束的时间差（1000毫秒）
          this.nowDateString = this.formatDuring(this.nowDate);
        },
        getGoods () {
          var bargainId = localStorage.getItem("bargainId");
          var goodId = localStorage.getItem("goodId");
          axios.get(`${this.baseUrl}/bargain/bargainactivity/info?bargainId=${bargainId}&goodId=${goodId}`, { headers: { token: this.token } }).then(({ data }) => {
            if (data.goods != null) {
              this.goods = data.goods
              console.log(data.goods);
            }
            if (data.bargainActivity != null) {
              console.log(data.bargainActivity);
              this.bargain = data.bargainActivity
              this.startTime = data.startTime//后天获取到活动开始的时间戳
              this.endTime = data.endTime//后天获取到活动结束的时间戳
              this.nowDate = this.startTime - new Date().getTime()//计算活动开始的时间差
              this.startEnd = this.endTime - new Date().getTime()//计算活动结束的时间差
              this.log.goodsId = this.goods.id
              this.log.goodsName = this.goods.goodsTitle
              this.log.goodsPrice = this.bargain.goodsPrice
              this.log.bargainId = this.bargain.bargainId
              this.goShare();
            }
          })
        }
      },
    })
  </script>
</body>

</html>